<template>
	<layout>
		<div class="userLayout">
			<div class="userInfo">
				<div class="avatar">
					<image class="image" src="/static/logo.png" mode=""></image>
				</div>
				<view class="nickname">
					{{userInfo.IP}}
				</view>
				<view class="address">
					来自于：{{userInfo?.address?.province}}{{userInfo?.address?.city}}
				</view>
			</div>
			<view class="section" v-for="(itemlist, index) in itemArray" :key="index">
				<profile-item v-for="item in itemlist" :item="item" :key="item.title" class="section-item">
					<template #right v-if="item.rightSlot">
						<text class="right-text">{{item.rightSlot}}</text>
					</template>
				</profile-item>
			</view>
		</div>
	</layout>
</template>

<script setup>
import { apiUserInfo } from '@/service/apis'
	const userInfo = ref({})
	const itemArray = ref([])
	const getUserInfo = async()=>{
		userInfo.value = await apiUserInfo()
		initializeItems()
	}
	onMounted(()=>{
		getUserInfo()
	})
	const initializeItems = ()=> {
		const item1 = [{
			title:'我的下载',
			icon:'download-filled',
			url:'/pages/classify/classlist/classlist?type=download&name=我的下载',
			rightText: userInfo.value?.downloadSize || ''
		},{
			title:'我的评分',
			icon:'star-filled',
			url:'/pages/classify/classlist/classlist?type=score&name=我的评分',
			rightText: userInfo.value?.scoreSize || ''
		},]
		const item2 = [{
			title:'订阅更新',
			icon:'notification-filled',
			url:'/pages/notice/notice?id=653507c6466d417a3718e94b'
		},{
			title:'常见问题',
			icon:'flag-filled',
			url:'/pages/notice/notice?id=6536358ce0ec19c8d67fbe82'
		},{
			title:'联系客服',
			icon:'chatboxes-filled',
			url:'contact',
			phoneNumber:'18262282746'
		},{
			title:'反馈建议',
			icon:'email-filled',
			url:''
		}]
		const item3 = [{
			title:'退出登录',
			icon:'gear-filled',
			url:'',
			rightSlot:'退出当前账号'
		}]
		itemArray.value = [item1,item2,item3]
	}
	
	
</script>

<style lang="scss">
.userLayout {
	.userInfo {
		display: flex;
		gap: 10rpx;
		flex-direction: column;
		align-items: center;
		padding: 160rpx 20rpx 20rpx;
		.avatar {
			width: 200rpx;
			height: 200rpx;
			border-radius: 50%;
			overflow: hidden;
			.image {
				width: 100%;
				height: 100%;
			}
		}
		.nickname {
			font-size: 44rpx;
			color: #333;
		}
		.address {
			font-size: 28rpx;
			color: #ababab;
		}
	}
	.section {
		margin: 20rpx;
		border: 1px solid #eee;
		border-radius: 10rpx;
		box-shadow: 0 0 30rpx rgba(0, 0, 0, 0.05);
		.section-item {
			border-bottom: 1px solid #eee;
			.right-text {
				color: #ababab;
				font-size: 24rpx;
			}
			&:last-child {
				border: none;
			}
		}
		
	}
}
</style>
